/**
 * 组件嵌套
 */


/**
 * 关于VueComponent
 * 1. school组件本质是一个名为VueComponent的构造函数,岂不是程序员定义的,是Vue.extend生成的.
 * 2. 我们只需要写<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行 new VueComponent(options)
 * 3. 特别注意: 每次调用Vue.extend,返回的都是一个全新的VueComponent
 * 4. 关于this指向
 *   -  组件配置中,data函数,methods,watch,computed中的函数,他么this均指向VueComponent实例对象
 *   - New Vue(options)中 data函数,methods,watch,computed中的函数,this指向为Vue实例对象
 * 5. VueComponent的实例对象,一般简称vc,Vue实例对象,一般简称vm
 */

// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
const student = Vue.extend({
	template: `<div><h2>{{studentName}}</h2><h2>{{studentAge}}</h2></div>`,
	data() {
		return {
			studentName: "玉石",
			studentAge: 20
		}
	},
});
const school = Vue.extend({
	template: `<div>
							<h2>{{schoolName}}</h2>
							<h2>{{schoolPosition}}</h2>
							<student></student>
							</div>`,
	data() {
		return {
			schoolName: "北大",
			schoolPosition: "北京"
		}
	},
	components: {
		student
	}
});
const app = Vue.extend({
	template: `<school></school>`,
	components: {
		school
	}
});
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	template: `<app></app>`,
	components: {
		app
	},
});
